<template>
   <div class="app-container">
    <ComponentSearchBar placeholder="输入名称搜索" v-model:name="query.name"  @query = "onSearch"/>

    <el-card class="box-card mt">
      <el-button type="primary"  @click="onAdd">
        <el-icon :size="20" class="mr-1">
          <IconIcOutlineAdd />
        </el-icon>添加
      </el-button>

      <SystemResourceEdit 
       :data="current"
            v-model:isShow="isShow"
            :title="title"
            @onChange = "onChange"
            @onClose = "isShow = false"/>

        <el-table
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%; margin-top:10px"
          row-key="id"
          :tree-props="{children: 'child' }">
        >
          <el-table-column :show-overflow-tooltip="true" prop="name" label="标题" width="180"/>
          <el-table-column :show-overflow-tooltip="true" prop="id" label="编码" />
        
          <el-table-column :show-overflow-tooltip="true" prop="description" label="描述" />
          <el-table-column :show-overflow-tooltip="true" prop="projectName" label="所属项目" />
       
          <el-table-column :show-overflow-tooltip="true" prop="seq" label="排序" width="55"/>
          <el-table-column label="状态" align="center">
            <template #default="scope">
              <el-tag type="danger" v-if="scope.row.isDeleted">禁用</el-tag>
              <el-tag type="success" v-else>正常</el-tag>
            </template>
          </el-table-column>
           <el-table-column align="center" label width="240">
            <template #default="scope">
              <ComponentCrud :data="scope" @onEdit="onEdit" @onRestore="onRestore" @onDelete="onDelete" >
              
                </ComponentCrud>
            </template>
          </el-table-column>
        </el-table>
     
        </el-card>
  </div>
</template>

<script>
import { queryData, deletes, restore   } from '@/api/admin/resource'

export default {
  name: 'resource',
  components: { },
  data() {
    return {
      query: {
        name: ''
      },
      list: [],
     
      listLoading: true,
      current: '',
      isShow: false,
      title: ''
    }
  },
  computed: {},
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      queryData().then((res) => {
        this.list = res.result
        this.listLoading = false
      })
    },
    onAdd() {
      this.current = ''
      this.isShow = true
      this.title = "添加权限"
    },
    onEdit(row) {
     this.current = row.id
     this.isShow = true
     this.title = "编辑权限"
    },
    onChange() {
     this.getList()
    },
    onSearch() {
     // this.query = query;
      this.getList();
    },
    onDelete(row) {
      deletes(row.id).then((_) => {
            row.isDeleted = true;
          });
    },
    onRestore(row) {
      restore(row.id).then((_) => {
        
            row.isDeleted = false;
          });
    }
    
  },
  mounted: function () {},
  watch: {
    'query.currentPage': {
      handler(val, oldVal) {
        console.log('watch', this.query)
        this.getList();
      },
      deep: true
    },
    'query.pageSize': {
      handler(val, oldVal) {
        console.log('watch', this.query)
        this.getList();
      },
      deep: true
    },
  }
}
</script>


